<template>
	<view class="login">
		<view :style="{ height: statusBarHeight + 'px'}"></view>
		<!-- 返回 -->
		<uni-icons type="left" size="23" color="#000000"
			:style="{ height: titleBarHeight + 'px', lineHeight: titleBarHeight + 'px'}" class="left-icon"
			@click="onClickBack"></uni-icons>

		<!-- logo -->
		<view class="logoc">

			<image src="https://limsapi.gzhbcss.com/static/logo.png" style="width: 400rpx;height: 400rpx;"></image>
			<view class="lotitle">汇标检测客户端</view>
			
			<view class="logincc">
				<view class="ccitem">
					<label>手机号码：</label>
					<input placeholder="请输入您的手机号码" v-model="number" @input="handleInput" class="ccitemi" />
				</view>
				<text style="color: #FF0000;font-size: 28rpx;margin-left: -100rpx;" v-show="!isValid">手机号码格式不对</text>
				<view class="ccitem">
					<input placeholder="请输入验证码" v-model="code" class="ccitemi" />
					<jp-verification-literalness ref="literalness" :isCaseCheck="false" contentHeight="40" @getCode="getCode" :securityCode="securityCode"></jp-verification-literalness>
				</view>
				
				<button class="loginsub" @click="verification">查询</button>
				
				<!-- 检测内容 -->
				<view class="fuwu">
					<view class="fuwucont">如您有检测需求，可按需求联系我们</view>
					<view class="fuwucont" @click="callPhone('400-188-1080')">汇标检测电话：400-188-1080<uni-icons type="phone-filled" color="#007aff" size="20" class="fuwuicon"></uni-icons></view>
					<view class="fuwucont" @click="callPhone('15914304822')">医药检测电话：15914304822 吴工<uni-icons type="phone-filled" color="#007aff" size="20" class="fuwuicon"></uni-icons></view>
					<view class="fuwucont" @click="callPhone('13533993058')">农业检测电话：13533993058 李工<uni-icons type="phone-filled" color="#007aff" size="20" class="fuwuicon"></uni-icons></view>
					<view class="fuwucont" @click="callPhone('18620073273')">食品检测电话：18620073273 杨工<uni-icons type="phone-filled" color="#007aff" size="20" class="fuwuicon"></uni-icons></view>
					<view class="fuwucont" @click="callPhone('18620733432')">环保检测电话：18620733432 肖工<uni-icons type="phone-filled" color="#007aff" size="20" class="fuwuicon"></uni-icons></view>
					<view class="fuwucont" @click="callPhone('18126770855')">招聘热线：18126770855<uni-icons type="phone-filled" color="#007aff" size="20" class="fuwuicon"></uni-icons></view>
					<view class="fuwucont">地址：广东省广州市黄埔区龙湖街道鹏飞街1号</view>
				</view>
				
			</view>

			<!-- <view class="applyfor">申请获取以下权限</view>

			<button open-type="getPhoneNumber" class="loginsub" @getphonenumber="getPhoneNumber">授权并获取手机号</button> -->

		</view>
		
		<!-- 领域 -->
		<uni-popup ref="pickerView" type="bottom" style="z-index: 9999999;">
			<view class="popup-view">
				<view class="popup-view-header">
					<view class="popup-view-cancel" @click="pickerCancel"> 取消 </view>
					<view>领域选择</view>
					<view class="popup-view-confirm" @click="pickerConfirm"> 完成 </view>
				</view>
				<picker-view v-if="visible" :immediate-change="false" :indicator-style="indicatorStyle" @change="bindChange"
					class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in domainList" :key="index">{{item.businessName}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		// getProgramEncryptNumber, // 获取手机密钥
		getProgramApiToken, // 获取领域token
		postProgramSmallProgramUser, // 获取领域
		postSmallProgramUsers, // 手机号码登录
	} from "@/proxy/program/program.api.js";
	import jpVerification from '@/uni_modules/jp-verification-literalness/components/jp-verification-literalness/jp-verification-literalness.vue';
	// 引入胶囊
	import {
		// getNavBarHeight,
		getStatusBarHeight,
		getTitleBarHeight
	} from "@/utils/system";
	
	import {
		debounce
	} from "@/utils/common";
	export default {
		components: {
		    jpVerification
		},
		data() {
			return {
				// navBarHeight: getNavBarHeight(),
				titleBarHeight: getTitleBarHeight(),
				statusBarHeight: getStatusBarHeight(),
				domainList:[], // 领域数组
				visible: true,
				indicatorStyle: `height: 68rpx;`,
				selectedData:{}, // 领域值
				securityCode:"",
				number:"",
				code:"",
				isValid:true,
			}
		},
		methods: {
			callPhone(phone) {
				// #ifdef APP-PLUS
				uni.makePhoneCall({
					phoneNumber: phone,
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
				// #endif

				// #ifdef MP-WEIXIN
				wx.makePhoneCall({
					phoneNumber: phone,
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
			   // #endif
			},
			pickerCancel() {
				this.$refs.pickerView.close();
			},
			getCode(){
				this.securityCode = '重新获取了';
			},
			verification(){
				let that = this;
				if(!that.number){
					return that.$toast({
						title:"请输入手机号码"
					})
				}
				if(!that.isValid){
					return that.$toast({
						title:"手机号码格式不对"
					})
				}
				if(!that.code){
					return that.$toast({
						title:"请输入验证码"
					})
				}
				const isCode = that.$refs.literalness.verification(that.code)  //验证123456是否通过验证
				if(!isCode){
					return that.$toast({
						title:"验证码错误"
					})
				}
				
				try{
					// 获取用户的 wx.login code
					uni.login({
						provider: 'weixin',
						success: async (res) => {
							const code = res.code; // 获取登录凭证 code
							// 发送 encryptedData 和 code 到后端进行手机号解密
							try {
								/**
								* 获取小程序手机号码(登录接口)
								*/
							    const result = await postSmallProgramUsers([
								   {
									   apiNumber: that.number,
									   code: code,
								   }
							   ]);
							   
							   	if(result.code == 200 && result.data.length !== 0){
							   		console.log("获取领域成功！！",result)
									that.domainList = result.data;
									that.selectedData = result.data[0]; // 默认选中第一条领域1
									that.$refs.pickerView.open();
							   	}else{
							   		return that.$toast({
							   			title: "如有检测需求，请下方联系我们~",
							   		});
							   	}
							   
								// uni.request({
								// 	// url:'https://limsapi.gzhbcss.com/api/encryptNumber',
								// 	method:'POST',
								// 	data:{
										
								// 		apiNumber: that.number,
								// 		code: code,
								// 	},
								// 	success: async (result) => {
								// 		if (result.data.code == 200) {
								// 			console.log("获取手机号码成功", result.data)
								// 			// 获取领域
								// 			// try {
								// 			// 	const results = await postProgramSmallProgramUser([{
								// 			// 		userPhone: result.data.msg,
								// 			// 	}]);
								// 			// 	// console.log("手机号码获取领域",results)
								// 			// 	if(results.code == 200){
								// 			// 		that.domainList = results.data;
								// 			// 		that.selectedData = results.data[0]; // 默认选中第一条领域1
								// 			// 		that.$refs.pickerView.open();
								// 			// 		// console.log("获取领域成功！！",results)
								// 			// 	}else{
								// 			// 		return that.$toast({
								// 			// 			title: "请联系您的客服",
								// 			// 		});
								// 			// 	}
								// 			// } catch (error) {
								// 			// 	console.error("请求失败", error);
								// 			// 	return that.$toast({
								// 			// 		title: "请求失败",
								// 			// 		icon: "error",
								// 			// 	});
								// 			// }
											
											
								// 		} else {
								// 			that.$toast({
								// 				title: "获取手机号码失败",
								// 			});
								// 		}
								// 	},
								// 	fail(error){
								// 		that.$toast({
								// 			title: "获取手机号码失败",
								// 		});
								// 	}
								// })
							
							} catch (error) {
								console.error("请求失败", error);
								return that.$toast({
									title: "请求失败",
									icon: "error",
								});
							}
						}
					})
					
				}  catch (error) {
				  console.error("请求失败", error);
				  return that.$toast({
					title: "请求失败",
					icon: "error",
				  });
				}
				
			},
			handleInput:debounce(async function(e){
				// const phoneRegex = /^134[0-8]\d{7}$|^13[^4]\d{8}$|^14[5-9]\d{8}$|^15[^4]\d{8}$|^l6[6]\d{8}$|^17[0-8]\d{8}$|^18[\d]{9}$|^19[8,9]\d{8}$/;
				const phoneRegex = /^1[3-9]\d{9}$/;
				// 如果是有效手机号，返回 true，否则返回 false
				this.isValid = phoneRegex.test(e.detail.value);
			}, 500),
			// 领域选择
			async pickerConfirm(){
				// 发送请求
				try {
				  const result = await getProgramApiToken(this.selectedData);
				  if (result.code == 200) {
					// console.log("获取领域token成功！！！",result);
					this.$refs.pickerView.close();
					this.$toast({
						title: "登录成功",
					});
					uni.setStorageSync("userInfo", result.data);
					// 成功登录
					uni.reLaunch({
					  url: "/pagesClient/index/index",
					});
				  } else {
					this.$toast({
					  title: result.data.msg,
					});
					return false;
				  }
				} catch (error) {
				  console.error("请求失败", error);
				  this.$toast({
					title: "请求失败",
					icon: "error",
				  });
				  return false;
				}
			},
			bindChange(e){
				// console.log("选中的值",this.domainList[e.target.value])
				this.selectedData = this.domainList[e.target.value];
			},
			// 返回上一页
			onClickBack() {
				uni.navigateBack();
			},
			// 获取手机号
			// getPhoneNumber(e) {
			// 	if (e.detail.errMsg === "getPhoneNumber:ok") {
			// 		let that = this;
			// 		// 用户授权成功，获取加密数据
			// 		const encryptedData = e.detail.encryptedData;
			// 		const iv = e.detail.iv;
			// 		// 获取用户的 wx.login code
			// 		uni.login({
			// 			provider: 'weixin',
			// 			success: async (res) => {
			// 				const code = res.code; // 获取登录凭证 code
			// 				// 发送 encryptedData 和 code 到后端进行手机号解密
			// 				try {
			// 					/**
			// 					* 获取小程序手机号码(登录接口)
			// 					*/
			// 				   // await getProgramEncryptNumber();
			// 					uni.request({
			// 						url:'https://limsapi.gzhbcss.com/api/encryptNumber',
			// 						method:'POST',
			// 						data:{
			// 							jsCode: code,
			// 							encryptedData: encryptedData,
			// 							iv: iv
			// 						},
			// 						success: async (result) => {
			// 							if (result.data.code == 200) {
			// 								console.log("获取手机号码成功", result.data)
			// 								// 在你的页面或方法中使用
			// 								// uni.navigateTo({
			// 								//     url: `/pagesClient/index/index?apiNumber=${result.data.msg}`  ,// 外部 H5 链接
			// 								// });
			// 								// 获取领域
			// 								try {
			// 									const results = await postProgramSmallProgramUser([{
			// 										userPhone: result.data.msg,
			// 									}]);
			// 									// console.log("手机号码获取领域",results)
			// 									if(results.code == 200){
			// 										that.domainList = results.data;
			// 										that.selectedData = results.data[0]; // 默认选中第一条领域1
			// 										that.$refs.pickerView.open();
			// 										// console.log("获取领域成功！！",results)
			// 									}else{
			// 										return this.$toast({
			// 											title: "请联系您的客服",
			// 										});
			// 									}
			// 								} catch (error) {
			// 									console.error("请求失败", error);
			// 									return this.$toast({
			// 										title: "请求失败",
			// 										icon: "error",
			// 									});
			// 								}
											
											
			// 							} else {
			// 								this.$toast({
			// 									title: "获取手机号码失败",
			// 								});
			// 							}
			// 						},
			// 						fail(error){
			// 							this.$toast({
			// 								title: "获取手机号码失败",
			// 							});
			// 						}
			// 					})

			// 				} catch (error) {
			// 					console.error("请求失败", error);
			// 					this.$toast({
			// 						title: "请求失败",
			// 						icon: "error",
			// 					});
			// 					return false;
			// 				}
			// 			}
			// 		})
			// 	} else {
			// 		uni.showToast({
			// 			title: '用户取消授权',
			// 			icon: 'none'
			// 		});
			// 	}
			// }
		},
	}	
</script>

<style lang="scss">
	/* #ifdef APP-PLUS || H5 */
	#app,
	/* #endif */
	page {
		// background-color: #F9FAFB;
		background-image: linear-gradient(to right, rgba(224, 247, 237, 1), rgba(235, 243, 254, 1));
		height: 100%;
	}

	.login {
		.left-icon {
			margin-left: 30rpx;
		}
		.logoc {
			text-align: center;
			margin: 0 auto;
			padding: 20rpx 16px 60rpx;
			// .applyfor{
			// 	font-size: 29rpx;
			// 	margin-top: 100rpx;
			// 	// text-align: center;
			// }
			.lotitle {
				font-size: 32rpx;
				// font-weight: bold;
				margin-top: -130rpx;
			}
			.logincc{
				background-color: #fff;
				border-radius: 20rpx;
				padding: 10px 40rpx;
				margin-top: 80rpx;
				.ccitem{
					display: flex;
					padding: 30rpx 0;
					border-bottom: 1rpx solid #ddd;
					font-size: 28rpx;
					align-items: center;
					.ccitemi{
						flex: 1;
						text-align: left;
						padding-left: 10rpx;
					}
				}
				
				.loginsub {
					width: 550rpx;
					height: 95rpx;
					border-radius: 60rpx;
					font-size: 25rpx;
					text-align: center;
					line-height: 95rpx;
					color: #fff;
					margin: 20rpx auto 0rpx;
					// margin: 140rpx auto 0rpx;
					background-color: #5385fe;
				}
				
				.fuwu{
					text-align: left;
					margin-top: 75rpx;
					font-size: 30rpx;
					background-color: #F3F4F6;
					.fuwucont{
						// margin: 4rpx 0;
						border-bottom: 1rpx solid #eee;
						padding: 30rpx 0;
						background-color: #FFF;
						display: flex;
						align-items: center;
						.fuwuicon{
							// float: right;
							margin-left: auto;
							border: 1rpx solid #007aff;
							border-radius: 50%;
							height: 50rpx;
							width: 50rpx;
							text-align: center;
							line-height: 50rpx;
						}
						// &::after {
						//     content: "";
						//     display: block;
						//     clear: both;
						// }
					}
				}
			}

		}
	}
	
	.popup-view {
		background-color: #FFFFFF;
		.popup-view-header {
			text-align: center;
			width: 100%;
			height: 90rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #F5F5F5;
			view {
				max-width: 50%;
				height: 100%;
				box-sizing: border-box;
				padding: 0 28rpx;
				font-size: 34rpx;
				line-height: 90rpx;
				&:first-child {
					color: #888888;
				}
				&:last-child {
					color: #007aff;
				}
			}
		}
		.picker-view {
			width: 100%;
			height: 476rpx;
			margin-top: 20rpx;
			.item {
				height: 68rpx !important;
				line-height: 68rpx;
				text-align: center;
				color: #000;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				cursor: pointer;
			}
		}
	}
</style>